<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      v-model 使用在组件上的效果
        主要是搞明白它的展开形式是怎样的。
        v-model="xxx"
          Vue2 中  :value="xxx"         @input="xxx = $event"
          Vue3 中  :modelValue="xxx"    @update:modelValue="xxx = $event"

      Vue3 中 v-model 还可以通过 : 来传递参数
        v-model:a="xxx"
          展开形式：      :a="xxx"       @update:a="xxx = $event"
        v-model:b="yyy"
          展开形式：      :b="yyy"       @update:b="yyy = $event"
        v-model:modelValue="ccc"
          展开形式：      :modelValue="ccc" @update:modelValue="ccc = $event"

        基于上面两个可以认为 v-model="xxx" 没有:参数时，相当于有个默认参数为 modelValue
          v-model="xxx"     ===       v-model:modelValue="xxx"

      Vue3 中这种 v-model:xx 的形式，是为了替代 Vue2 中 v-bind 的 sync 修饰符的功能。
     -->

    <div id="app"></div>

    <!-- 引入的类库要修改为 Vue3 -->
    <script src="../lib/vue.global.js"></script>
    <script>
      // Vue3 创建根组件，是通过 createApp() 方法来创建的。
      const app = Vue.createApp({
        // 跟组件的配置对象
        //    PS1: 没有 el 选项
        // el: "#app",
        //    PS2: data 选项不区分根组件与普通组件了，全部需要写成函数返回对象的形式
        data() {
          return {
            myName: "张三",
            age: 18,
          };
        },
        template: `
        <div id="app">
          <hello :modelValue="myName" @update:modelValue="myName = $event"></hello>
          <hr />
          <!-- 上面的 简写形式如下 -->
          <hello v-model="myName"></hello>

          <hello v-model="myName" v-model:age="age"></hello>
        </div>
        `,
      });

      // Vue3 注册全局组件，是通过 createApp() 返回的 应用实例（app）的component方法来注册
      app.component("hello", {
        template: `
          <div>
            <h2>Hello, {{ modelValue }} - {{ age }}</h2>
            <button @click="fn1('李四')">修改 name 为 李四</button>
            <button @click="fn1('王五')">修改 name 为 王五</button>
            <button @click="$emit('update:age', age + 1)">age++</button>
          </div>
        `,
        props: ["modelValue", "age"],
        methods: {
          fn1(text) {
            this.$emit("update:modelValue", text);
          },
        },
      });

      // Vue3 挂载应用到挂载点，使用 app.mount('#app') 的方式
      app.mount("#app");
    </script>
  </body>
</html>
